<template>
  <div class="mybg" :style="setBg()">
    <div class="footerINfo">
      <div class="footlogo">
        <img :src="contentInfoConfig.footer_img"/>
      </div>

      <!-- 联系我 -->
      <div class="">
        <div class="tabTitle">
          <span><i class="el-icon-s-promotion"></i></span>
          联系我们
        </div>
        <div class="telInfo">
          {{ contentInfoConfig.phone }}<br/>
          {{ contentInfoConfig.fax }}<br/>
          {{ contentInfoConfig.email }}<br/>
          {{ contentInfoConfig.address }}<br/>
        </div>
      </div>
      <!-- end -->
      <!-- 相关链接 -->
      <div class="">
        <div class="tabTitle">
          <span><i class="el-icon-s-ticket"></i></span>
          相关链接
        </div>
        <div class="telInfo">
          <!-- 中华人民共和国教育部考试中心<br />
          全国网络教育阳光招生服务平台<br />
          北京市成招考试报考平台<br />
          北京市自学考试报考平台<br />
          中国高等教育学生信息网<br /> -->
          <div @click="windowOpens(item)" v-for="(item, index) in contentInfoConfig.link" :key="index">
            {{ item.id + "." + item.title }}
          </div>
        </div>
      </div>
      <!-- end -->
      <!-- 二维码 -->
      <div class="footlogo">
        <div class="erw">
          <img :src="contentInfoConfig.qr_code"/>
          贵州工程应用技术学院
        </div>
      </div>
      <!-- end -->
    </div>
    <div @click="openLink" class="end">
      <img class="org" src="../assets/blue.png"/>
      {{ contentInfoConfig.information }} &nbsp;<img
      src="../gongan.png"
    />&nbsp;贵公网安备 {{ contentInfoConfig.archival_information.number }}号
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  data() {
    return {}
  },
  methods: {

    openLink: function(){
      window.open("http://www.beian.gov.cn/portal/recordQuery?token")
    },

    windowOpens: function(item) {
      if (!item.link){
        this.$message.error('暂无条转链接')
        return;
      }
      window.open(item.link)
    },
    setBg() {
      const a = this.contentInfoConfig.footer_cover_img;
      return {
        backgroundImage: `url(${a})`,
      };
    },
  },
  computed: mapState(["contentInfoConfig"]),
};
</script>

<style>
.org {
  height: 48px;
}

.footlogo {
  display: flex;
  align-items: center;
}

.end {
  background-color: #091a2f80;
  padding: 20px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.erw {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.erw img {
  margin-bottom: 10px;
}

.telInfo {
  margin-top: 10px;
  line-height: 1.6;
  font-size: 18px;
}

.tabTitle {
  font-size: 20px;
}

.footerINfo img {
  width: 100px;
  height: 100px;
}

.footerINfo {
  padding: 60px 0 40px 0;
  color: #eeeeee;
  width: 1200px;
  margin-left: 50%;
  display: flex;
  justify-content: space-between;
  transform: translateX(-50%);
}

.mybg {
  cursor: pointer;
  width: 100%;
  background-image: url(../assets/6_03.jpg);
}
</style>
